<template>
	<view class="cl-dialog__wrapper">
		<cl-popup
			v-model="visible"
			:direction="direction"
			:backgroundColor="backgroundColor"
			:close-on-click-modal="closeOnClickModal"
			:size="width"
			:border-radius="16"
			:padding="0"
			:top="top"
			@close="onClose"
		>
			<view class="cl-dialog">
				<!-- 顶部 -->
				<view class="cl-dialog__header" v-if="title">
					<text class="cl-dialog__title">{{ title }}</text>
				</view>

				<!-- 内容 -->
				<view class="cl-dialog__container" :style="{ padding }">
					<view class="cl-dialog__message">
						<slot></slot>
					</view>
				</view>

				<!-- 底部 -->
				<view class="cl-dialog__footer" v-if="$slots.footer">
					<slot name="footer"> </slot>
				</view>

				<!-- 关闭按钮 -->
				<view class="cl-dialog__close" v-if="showCloseBtn" @tap="close">
					<text class="cl-icon-close"></text>
				</view>
			</view>
		</cl-popup>
	</view>
</template>

<script lang="ts">
/**
 * @description 对话框
 * @property {Boolean} modelValue 是否可见
 * @property {String} title 标题
 * @property {String} width 宽度，默认80%
 * @property {Boolean} closeOnClickModal 点击遮罩层是否关闭，默认true
 * @property {Boolean} showCloseBtn 显示关闭按钮
 */

import { defineComponent, ref, watch } from "vue";

export default defineComponent({
	name: "cl-dialog",

	props: {
		modelValue: {
			type: Boolean,
			required: true,
		},
		direction: {
			type: String,
			default: 'center'
		},
		title: String,
		width: {
			type: String,
			default: "80%",
		},
		closeOnClickModal: {
			type: Boolean,
			default: true,
		},
		showCloseBtn: Boolean,
		padding: {
			type: String,
			default: '20rpx 40rpx 30rpx 40rpx'
		},
		top: {
			type: String,
			default: 'none'
		},
		backgroundColor: String
	},

	setup(props, { emit }) {
		const visible = ref<boolean>(false);

		watch(
			() => props.modelValue,
			(val: boolean) => {
				visible.value = val;
			},
			{
				immediate: true,
			}
		);

		function open() {
			visible.value = true;
		}

		function close() {
			visible.value = false;
		}

		function onClose() {
			emit("update:modelValue", false);
			emit("close");
		}

		return {
			visible,
			open,
			close,
			onClose,
		};
	},
});
</script>
